<template>
	<view class="login-box">
		<!-- 自定义表单校验 -->
		<!-- 	<view class="">
			{{ formData.phone }}
		</view>
		<view class="">
			{{ formData.password }}
		</view> -->
		<uni-forms
			class="login-form"
			ref="customForm"
			label-width="0px"
			:rules="fromRules"
			:modelValue="formData"
		>
			<uni-forms-item
				label=""
				name="phone"
			>
				<view class="login-form-input">
					<text class="login-form-input-label">手机号</text>
					<input
						v-model="formData.phone"
						trim="both"
						type="text"
						confirm-type="next"
						prefixIcon="person-filled"
						@confirm="handleConfirm"
					/>
				</view>
			</uni-forms-item>
			<uni-forms-item
				label=""
				name="password"
			>
				<view class="login-form-input">
					<text class="login-form-input-label">密码</text>
					<input
						v-model="formData.password"
						:focus="isFocus"
						type="password"
						trim="both"
						password-icon
						confirm-type="done"
						prefixIcon="locked-filled"
					/>
				</view>
			</uni-forms-item>
		</uni-forms>

		<view class="btns">
			<!-- <button
				type="primary"
				size="mini"
				plain
				style="flex: 1"
				@click="onVisitorLogin"
			>
				游客
			</button> -->

			<button
				type="primary"
				style="flex: 1"
				@click="submit"
			>
				登录
			</button>
		</view>
	</view>
</template>

<script>
import { getUserByPassword } from '@/apis/users.js';
import { useUserStore } from '@/stores/user.js';
export default {
	name: 'LoginBox',
	data() {
		return {
			isFocus: false,
			// 自定义表单数据
			formData: {
				phone: '12312341232',
				password: '123456',
			},
			// 自定义表单校验规则
			fromRules: {
				phone: {
					rules: [
						{
							required: true,
							errorMessage: '清输入账号',
						},
					],
				},
				password: {
					rules: [
						{
							required: true,
							errorMessage: '清输入密码',
						},
					],
				},
			},
		};
	},
	onReady() {
		// 设置自定义表单校验规则，必须在节点渲染完毕后执行
		this.$refs.customForm.setRules(this.fromRules);
	},
	methods: {
		login() {
			const that = this;
			getUserByPassword({
				phone: that.formData.phone,
				password: that.formData.password,
			}).then((res) => {
				// console.log('res', res);
				if (!res) {
					uni.showToast({
						icon: 'error',
						title: '手机号或密码错误',
					});

					return;
				}

				useUserStore().saveUser(res);
				uni.redirectTo({
					url: '../../pages/index/index',
				});
			});
		},

		async submit() {
			const that = this;
			this.$refs.customForm
				.validate()
				.then((res) => {
					// 表单验证成功
					// console.log(res);
					that.login();
				})
				.catch((err) => {
					console.log('err', err);
				});

			// const result = await this.$refs.customForm.validate();
			// console.log('result', result);
		},
		// 游客登录
		onVisitorLogin() {
			console.log('游客');
			useUserStore().saveUser({ id: 0, role: 0 });
			uni.redirectTo({
				url: '../../pages/index/index',
			});
		},
		handleConfirm() {
			this.isFocus = false;
			this.$nextTick(() => {
				this.isFocus = true;
			});
		},
	},
};
</script>

<style scoped>
.login-form {
	margin: 0 auto;
	/* background-color: pink; */
}

.login-form-input {
	display: flex;
	align-items: center;
	background-color: #f2f3f7;
	height: 90rpx;
	border-radius: 20rpx;
}

.login-form-input-label {
	width: 90rpx;
	margin: 0 28rpx;
}

.btns {
	display: flex;
	justify-content: space-between;
	gap: 56rpx;
	margin-top: 48rpx;
}
</style>
